<template>
	<div class="u-page">
		<!-- <div class="banner">
			<img src="images/banner.jpg" />
		</div> -->
		
		<!--邀请码-->
		<div class="invite u-mt-15">
			<!-- <div class="qrcode">
				<img src="">
			</div> -->
			<div class="invite-area-top">
				<div class="copy-code">
					<p>您的邀请码</p>
					<span>{{InvitationCode}}</span>
					<!-- <a href="javascript:;" @click="copyBtn(InvitationCode)">复制邀请码</a> -->
				</div>
				<div class="invite-area-bottom">
					<div class="create-code">
						<a href="javascript:;" @click="copyBtn(InvitationCode)">复制邀请码</a>
					</div>
				</div>
			</div>
			<div style="width: 85%;margin: 0 auto;">
				<u-button :custom-style="customStyle" open-type="share">立即邀请好友</u-button>
			</div>
		</div>
		<div class="container u-mt-15">
			<div class="container-title">
				<span class="container-item u-text-center">我的邀请记录</span>
			</div>
			<div class="container-list u-mt-10 u-pb-20">
				<div v-if="InvitationRecords && InvitationRecords.length>0">
					<div class="records-item" v-for="(item,index) in InvitationRecords">
						<div class="u-flex">
							<u-avatar :src="item.avatar" size="70"></u-avatar>
							<span class="u-pl-10 u-fz-16">{{item.nickName}}</span>
						</div>
						<div class="u-fz-16" style="color: #fe8007;">{{item.shareId}}</div>
					</div>
				</div>
				<div class="u-center u-pt-30 u-pb-30" v-else>
					暂无邀请记录
				</div>
			</div>
		</div>
		
		<div class="container">
			<div class="container-title">
				<div class="container-bg">活动规则</div>
			</div>
			<div class="container-rule">
				<div>1、活动时间：即日起截止至2023年6月30日；</div>
				<div>2、活动产品：成为海上新空间一员，每人仅限1份；</div>
				<div>3、砍价过程中也可随时联系商家购买；</div>
				<div>4、所有解释权归商家所有。</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
    export default {
	  mixins: [shareMixins],
      data() {
        return {
			UserInfo: {},
			pageNum: 0,
			pageSize: 10,
			InvitationRecords: [],
			InvitationCode: '',
			shareData: {
			    docUnid: '',
				url: '',
				route: '',
				imageUrl: ''
			},
			customStyle: {
				// marginTop: '30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				color: '#ffffff',
				backgroundColor: '#fe8007'
			}
		};
      },
      
      onLoad(options) {
			//未登录跳转到登录页面
			var loginRes = this.checkLogin();
			if (loginRes) {
				this.UserInfo = uni.getStorageSync('userInfo')
				this.getUnusedCode()
				this.getInvitationRecords()
				this.shareData.docUnid = this.guid()
				this.shareData.url = '/pages_private_scene1/NewSeaSpace/Index'
				this.shareData.route = this.getCurrentPageUrl(this)
				this.shareData.imageUrl = 'https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/NewSeaSpace/cover.png'
			}
	  },
	  
	  onShow() {
	  	
	  },
    
      mounted() {
      },
    
      onReady() {
         
      },
	  
	  onReachBottom() {
	  	  
	  },
    
      methods: {
		  
			/**
			* 生成邀请码
			*/
			async createCode(){
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/space/share/create",
					userId: this.UserInfo.userId,
					nickName: this.UserInfo.nickName,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.InvitationCode = result.data.shareId
				}else{
					let res2 = await this.$u.api.unifyMiniRestGet({
						systemid: "meily",
						url: "/space/share/code/"+this.UserInfo.userId,
					});
					if(res2.code == 200){
						this.InvitationCode = res2.data
					}
				}
			},
			
			//点击一键复制
			copyBtn (text) {
				wx.setClipboardData({
					//准备复制的数据内容
					data: text,
					success: function (res) {
						wx.showToast({
							title: '已复制',
						});
					}
				});
			},
		  
		  /** 
		   * 获取邀请记录
		   */
		  async getInvitationRecords() {
			  let result = await this.$u.api.unifyMiniRest({
			  	systemid: "meily",
			  	url: "/space/accept/list",
				inviteId: this.UserInfo.userId,
			  	loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if (result.code == 200) {
			  		this.InvitationRecords = result.rows
			  }
		  },
		  
		  /** 
		   * 获取未使用的邀请码
		   */
		  async getUnusedCode(){
			  let res2 = await this.$u.api.unifyMiniRestGet({
			  	systemid: "meily",
			  	url: "/space/share/code/"+this.UserInfo.userId,
			  });
			  if(res2.code == 200){
			  	this.InvitationCode = res2.data
			  }else{
				  this.createCode()
			  }
		  }
		  
	  },
    };
</script>

<style scoped>
	body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
	li, dl, dt, dd, form, a, fieldset, input, th, td,i
	{margin: 0; padding: 0; border: 0; outline: none; font-style: normal; font-weight: normal; list-style-type: none;}
	html{ height: 100%;}
	a{ text-decoration: none;}
	a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
	input,textarea{-webkit-appearance:none;}
	body{ font-family: "微软雅黑"; font-size:.26rem; height: 100%; background: #cc2213; }
	.banner img{ width: 100%;}
	.container{ border-radius: 10rpx; background: #fff7c9; margin:0 30rpx 40rpx 30rpx;}
	#countdown_dashboard{ overflow: hidden; text-align: center; margin:.1rem auto 0 auto; padding: .12rem .4rem; width: 5rem; }
	#countdown_dashboard .dash{ float: left; display: inline-block; color: #fff;}
	#countdown_dashboard .item{ line-height: .6rem; margin-right: .1rem; }
	#countdown_dashboard .digit{ font-size: .3rem; float: left; width:.3rem; height: .5rem; line-height: .5rem; text-align: center; border-radius: .05rem; margin-right: .1rem;
	background-image: -moz-linear-gradient(top, #092a49, #010718); 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #060606)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#060606',);}
	#countdown_dashboard .dash:nth-child(1) .digit{
	background-image: -moz-linear-gradient(top, #fe2828, #fe2828); 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fe2828), color-stop(1, #fe2828)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe2828', endColorstr='#fe2828',);}
	#countdown_dashboard  .orange{
		background-image: -moz-linear-gradient(top, #fe2828, #fe2828); 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fe2828), color-stop(1, #fe2828)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe2828', endColorstr='#fe2828',);
	}
	.container-title{ background: #fe8007; border-radius: 10rpx; height: 80rpx; line-height: 80rpx;  position: relative; }
	.wrapper{ width: 85%; margin: 0 auto; color: #1e1e1e; padding: 30rpx; font-size: 28rpx; }
	.wrapper p{text-align: center; }
	.wrapper span{ color: #ff1914;}
	.wrapper b{ font-weight: normal;}
	.votebox{ margin-top: 80rpx;}
	.barline b{ font-weight: normal;}
	.barbox dt a{color:#0048CC;}
	.barbox dd{float:left;}
	.barbox dd.last{color:#999;}
	.barbox dd.barline{width:100%; background:#fce877; height:.25rem;display:inline; border-radius:.15rem; position: relative;}
	.barbox dd.barline div.charts{height:.25rem; position: relative; color: #fff; line-height: .25rem; text-indent: .05rem; background:#eb0000;border-radius:.15rem; text-align: right;   font-size: .24rem; }
	.barline img{ width: .5rem; margin-top: -.11rem; margin-right: -.1rem;}
	.container-title .container-item{ color: #fff; text-align: center; display: block; font-size: 30rpx;}
	.container-list{ overflow: hidden;}
	.container-list li{ line-height: 60rpx;}
	.container-list li span{ width: 33.33%; float: left; text-align: center; color: #1e1e1e;}
	.page{ overflow: hidden; width: 90%; margin: 0 auto; border-top: 1px solid #fce877; line-height: .6rem;}
	.page a{ float: left; display: block; width: 33.33%; color: #595959;}
	.page  .page-up{text-align: left;}
	.page .page-mid{ text-align: center;}
	.page .page-down{ text-align: right;}
	.container-bg{ background: url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/NewSeaSpace/rule_bg.png) no-repeat; background-size:100% 100%; font-size: 30rpx; width: 80%; position: absolute; left: 10%; top: -10rpx; height: 90rpx; text-align: center; color: #fff;}
	.container-product{ overflow: hidden;}
	.product-pic{ float: left; width: 30%;}
	.product-pic img{ width: 18rpx; padding: 15rpx;}
	.product-text{ float: left; padding-top: 40rpx;}
	.product-text p{ font-size: 30rpx;}
	.product-text p span{ font-size: .24rem; color: #ff5041;}
	.container-rule{ color: #5c4943; padding: 15rpx;}
	.container-rule div{ font-size: 30rpx;}
	.infor{ padding: 30rpx 0;}
	.infor-input{  width: 80%; background: #fff; border-radius: .05rem; margin: .15rem auto; text-indent: .15rem; display: block; line-height: .8rem;}
	.infor-sub{ background: #ff5041; color: #fff; line-height: .7rem; border-radius: 1rem; text-align: center; width: 40%; display: block; margin:.3rem auto 0 auto;}
	.info-tips{ display: block; color: red; width: 80%; margin: 0 auto; font-size: .24rem;}
	.success-con .info-tips { font-size: .24rem;}
	.layer,.chop-layer{ display:none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.5); top: 0;}
	.success{ position: relative; top: 25%; width: 70%; background: #fff; border-radius: .15rem; left: 15%; padding: .5rem 0;}
	.success-title{ text-align: center; top: -.5rem; position: absolute; width: 100%;}
	.success-title img{ width: 3.5rem;}
	.success-con{ text-align: center; width: 70%; margin: 0 auto; padding: .5rem 0; font-size: .3rem;}
	.success-con span{ font-size: .32rem; color: #ff5041;}
	.share-btn{ margin: 0 auto; width: 2rem; height: .5rem; text-align: center; line-height: .5rem; background: #ff5041; border-radius: .5rem;}
	.share-btn a{color: #fff;}
	/* .chop-box{ position: fixed; top: 15%; width: 100%; background:url(../images/light.png) no-repeat top; background-size:100% auto ; border-radius: .15rem;  padding-bottom: .5rem;} */
	.mt{ margin-top: 2rem;}
	.chop-btn{ width: 70%; margin: 0 auto; overflow: hidden;}
	.know{ float: left; width: 1.3rem; height: .5rem; color: #ff5041; border-radius: 2rem; border: 1px solid #ff5041; text-align: center; line-height: .5rem;}
	.join{float: right; width: 1.3rem; height: .5rem; color: #FFF; border-radius: 2rem; background: #ff5041; text-align: center; line-height: .5rem;}
	.close{z-index: 9999; position: absolute;cursor: pointer; font-size: .3rem; top: .1rem; right: .1rem; color: #999; width: .5rem; height: .5rem; text-align: center;  line-height: .5rem;}
	.success-con .infor-input{ border: 1px solid #ddd; width: 100%; line-height: .6rem;}
	.baomingbox .success{ padding: .3rem 0;}
	.baomingbox .success-con{ padding: .3rem 0;}
	/*邀请码*/
	.invite{
		width: 700rpx;
		height: 450rpx;
		background: url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/NewSeaSpace/yaoqingma-bg.png) center center no-repeat;
		background-size: 700rpx 450rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.invite .qrcode img{width: 20rpx;height: 20rpx;}
	.invite .copy-code{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
		border-right: solid #fe8007 5rpx;
	}
	.invite .copy-code p{font-size: 34rpx;color: #b587f2;}
	.invite .copy-code span{display: inline-block;font-size: 40rpx;color: #6617cd;font-weight: bold;}
	.invite .copy-code a{display: inline-block;background: #6814cc;color: #FFFFFF;font-size: 26rpx;width: 170rpx;height: 60rpx;line-height: 60rpx;border-radius: 40rpx;text-align: center;letter-spacing: 1rpx;}
	.invite .create-code a{display: inline-block;background: #fe8007;color: #FFFFFF;font-size: 32rpx;width: 220rpx;height: 80rpx;line-height: 80rpx;border-radius: 20rpx;text-align: center;letter-spacing: 1rpx;}
	.records-item {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		line-height: 120rpx;
	}
	.invite-area-top {
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.invite-area-bottom {
		width: 50%;
		display: flex;
		justify-content: center;
	}
</style>